import { Component } from "react";

export default class CommentList extends Component {
  render() {
    const { list, delComment, changeAttudde } = this.props;
    return (
      <div className="reply-list">
        {/* 评论项 */}
        {list.map((item, index) => {
          return (
            <div className="reply-item" key={item.rpid}>
              {/* 头像 */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    src={item.user.avatar}
                    alt=""
                  />
                </div>
              </div>

              <div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  <div className="reply-info">
                    {/* 评论时间 */}
                    <span className="reply-time">{item.ctime}</span>
                    {/* 喜欢 */}
                    <span className="reply-like">
                      {/* 选中类名： liked */}
                      <i
                        onClick={() => {
                          changeAttudde(item.rpid, item.action === 1 ? 0 : 1);
                        }}
                        className={`icon like-icon ${
                          item.action === 1 ? "liked" : ""
                        }`}
                      />
                      <span>{item.like}</span>
                    </span>
                    {/* 不喜欢 */}
                    <span
                      className="reply-dislike"
                      onClick={() => {
                        changeAttudde(item.rpid, item.action === 2 ? 0 : 2);
                      }}
                    >
                      {/* 选中类名： disliked */}
                      <i
                        className={`icon dislike-icon ${
                          item.action === 2 ? "disliked" : ""
                        }`}
                      />
                    </span>
                    <span
                      className="delete-btn"
                      onClick={() => {
                        delComment(item.rpid);
                      }}
                    >
                      删除
                    </span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
